{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}发布文章{% endblock %}
{% block content %}
    <link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">

    <div style="margin-left:10px">
        <form class="form-horizontal" action="." method="post">{% csrf_token %}
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>标题:</span></div>
                <div class="col-md-10 text-left">{{ article_post_form.title }}</div>
            </div>
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>栏目:</span></div>
                <div class="col-md-10 text-left">
                    <select id="which_column">
                        {% for column in article_columns %}
                            <option value="{{ column.id }}">{{ column.column }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>文章标签:</span></div>
                <div class="col-md-10 text-left">
                    {% for tag in article_tags %}
                        <label class="checkbox-inline">
                            <input class="tagcheckbox" type="checkbox" id="{{ tag.id }}" name="article_tag"
                                   value="{{ tag.tag }}"> {{ tag.tag }}
                        </label>
                    {% empty %}
                        <p>您没有为文章输入标签。<a href="{% url 'article:article_tag' %}">点击输入标签</a></p>
                    {% endfor %}
                </div>
            </div>

            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>内容:</span></div>
                <div id="editormd" class="col-md-10 text-left" style="margin-top: 10px">
                    <textarea style="display:none;" id="id_body"></textarea>
                </div>
            </div>
            <div class="row">
                <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="publish_article()">
            </div>
        </form>
    </div>
    <script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <script type="text/javascript" src='{% static "editor/editormd.min.js" %}'></script>
    <script type="text/javascript" src="{% static 'js/json2.js' %}"></script>
    <script type="text/javascript">
        function publish_article() {
            var title = $("#id_title").val();
            var column_id = $("#which_column").val();
            var body = $("#id_body").val();
            {#var article_tags = [];#}
            {#$.each($("input[name='article_tag']:checked"), function () {#}
            {#    article_tags.push($(this).val());#}
            {#});
        #}
            $.ajax({
                url: "{% url 'article:article_post' %}",
                type: "POST",
                data: {"title": title, "body": body, "column_id": column_id, "tags": JSON.stringify(article_tags)},
                {#data: {"title": title, "body": body, "column_id": column_id},#}
                success: function (e) {
                    if (e == "1") {
                        layer.msg("successful");
                        location.href = "{% url 'article:article_list' %}";
                    } else if (e == "2") {
                        layer.msg("sorry.");
                    } else {
                        layer.msg("项目名称必须写，不能空。");
                    }
                },
            });
        }

        $(function () {
            var editor = editormd("editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "{% static 'editor/lib/' %}"
            });
        });

    </script>

{% endblock %}
